<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div id="app">
        <div class="container">
            <h1>品牌管理</h1>
            <!-- <div class="form-group">
                <div class="input-group">
                    <h2>品牌管理</h2>
                </div>
            </div> -->

            <table class="table">
                <thead>
                    <tr>
                        <th scope="col">编号</th>
                        <th scope="col">资产名称</th>
                        <th scope="col">价格</th>
                        <th scope="col">创建时间</th>
                        <th scope="col">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="item in list" :key="item.id">
                        <td>{{ item.id }}</td>
                        <td>{{ item.name }}</td>
                        <td :class="{ red: item.price >= 100 }" :style="'color: ' + (item.price > 100 ? 'red' : 'black') + ';'">{{
                            item.price | priceFilter | prevPriceFilter }}</td>
                        <!-- <td :class="{red:item.price>100}">{{ item.price }}</td> -->
                        <td>{{ item.time | dateFilter }}</td>
                        <td><a @click.prevent="delItem(item.id)" href="#">删除</a></td>
                    </tr>
                    <tr style="background-color:#eee">
                        <td>统计:</td>
                        <td colspan="2">总价钱为:{{ allPrice }}</td>
                        <td colspan="2">平均价:{{ svgPrice }}</td>
                    </tr>
                </tbody>
            </table>
            <div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text" style="width: 100px; font-size: 20px;">资产名称</span>
                    </div>
                    <input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
                </div>
                <input type="number" class="form-control" aria-label="Dollar amount (with dot and two decimal places)"
                    value="0">
                <br>
                <button @click.prevent="btnAdd" class="btn btn-primary">添加资产</button>
            </div>

        </div>
    </div>
</template>


<script>
export default {
    data() {
        return {
            name: "",
            price: 0,
            list: [
                { id: 101, name: '外套', price: 199, time: new Date("2023-08-12") },
                { id: 102, name: '裤子', price: 76, time: new Date("2023-08-12") },
                { id: 103, name: '鞋子', price: 99.8, time: new Date("2023-08-12") },
                { id: 104, name: '头发', price: 210, time: new Date("2023-08-12") },
                { id: 105, name: '袜子', price: 20, time: new Date("2023-08-12") },

            ]
        }
    },
    methods: {
        btnAdd() {
            if (this.name && this.price) {
                const id = ~~(Math.random() * 1000)
                this.list.push({
                    id,
                    name: this.name,
                    price: this.price,
                    time: new Date(),
                });
                this.name = "",
                    this.price = 0;
            }
        },
        delItem(id) {
            if (id && confirm("确认删除吗？")) {
                this.list = this.list.filter((item) => item.id !== id);

            }
        },


    },
    filters: {
        priceFilter: (value) => {
            return value + "￥"
        },
        prevPriceFilter: (value) => {
            return "惊爆价：" + value
        },
        dateFilter: (value) => {
            return value.toLocaleString()
        },
        reMessage() {
            console.log(1)
            return this.message.split("").reverse().join("")
        },

    },
    computed: {
        allPrice() {
            let price = 0;
            this.list.forEach((item) => {
                price += item.price;
            });
            return price
        },
        svgPrice() {
            return this.allPrice / this.list.length
        }
    }
}
</script>


<style>
#app {
    text-align: left;
    margin-top: 60px;
}



.table {
    border: 1px solid #d4d4d4;

}

.table th {
    border: 1px solid #d4d4d4;

}

.table td {
    border: 1px solid #d4d4d4;

}
</style>